<template>
  <div class="staffDepartManage">
    <div class="searchBox">
      <div class="left">
        <label>员工姓名：</label>
        <common-input
          v-model:queryCriteria="queryCriteria"
          :placeholder="'请输入员工姓名'"
        ></common-input>
        <label>员工离职状态：</label>
        <common-select v-model="departState" :options="departOptions"></common-select>
        <label>离职类型：</label>
        <common-select v-model="departType" :options="departTypeOptions"></common-select>
      </div>
      <div class="right">
        <el-button type="primary" @click="handleQuery">
          <el-icon :size="16">
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="resetQuery">
          <el-icon :size="16">
            <Refresh />
          </el-icon>
          重置
        </el-button>
        <el-button type="primary" @click="createLink">
          <el-icon :size="16">
            <Plus />
          </el-icon>
          生成填写链接
        </el-button>
      </div>
    </div>
    <common-table
      :style="{ flex: 1 }"
      :columns="columns"
      :table-data="tableData"
      :pagination="pagination"
    >
      <template #operate="{ row }">
        <el-link type="primary" style="margin-right: 8px">
          <span @click="advanceDepart(row)" v-if="row.departMentStr !== '已离职'">
            <el-icon :size="20">
              <Edit />
            </el-icon>
            提前离职
          </span>
        </el-link>
      </template>
    </common-table>
  </div>
  <link-dialog :link="linkMsg" v-model:link-dialog="linkDialog"></link-dialog>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import CommonInput from '@/components/CommonInput.vue';
import CommonSelect from '@/components/CommonSelect.vue';
import CommonTable from '@/components/CommonTable.vue';
import { ref } from 'vue';
import { onBeforeMount } from 'vue';
import { columns } from '@/views/staffDepartManage/mockData';
import {
  getStaffDepLinkReq,
  staffDepartManagePageList,
  agreeDepartAPI,
} from '@/api/staffDepartManage';
import LinkDialog from '@/views/staffDepartManage/components/LinkDialog.vue';

const queryCriteria = ref('');
const departState = ref('0');
const departType = ref('0');
const departOptions = ref([
  {
    label: '全部',
    value: '0',
  },
  {
    label: '确定离职',
    value: '1',
  },
  {
    label: '已离职',
    value: '2',
  },
]);
const departTypeOptions = ref([
  {
    label: '全部',
    value: '0',
  },
  {
    label: '主动辞职',
    value: '1',
  },
  {
    label: '辞退',
    value: '2',
  },
  {
    label: '退休',
    value: '3',
  },
  {
    label: '开除',
    value: '4',
  },
  {
    label: '试用期未通过',
    value: '5',
  },
]);

onBeforeMount(() => {
  getPageList();
});

const tableData = ref([
  {
    state: 1,
  },
]);
// 分页
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const linkMsg = ref('');
const linkDialog = ref(false);
// 生成填写地址
const createLink = async () => {
  const res = await getStaffDepLinkReq();
  console.log('res', res);
  if (res && res.code == 200) {
    linkDialog.value = true;
    linkMsg.value = res.data.url;
  }
};

const getPageList = async () => {
  let par = {};
  // TODO 缺少接口
  const res = await staffDepartManagePageList({
    currentPage: pagination.value.pageNum,
    totalPage: '',
    totalEntries: '',
    pageSize: pagination.value.pageSize,
    queryCriteria: '',
    stateFlag: '',
  });
  console.log(res.data);

  if (res && res.code == 200) {
    tableData.value = res.data.records;
    // pagination.value.total = res.data.info.total*1
  }
};

const setSize = (val) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = val;
  getPageList();
};
const setPage = (val) => {
  pagination.value.pageNum = val;
  getPageList();
};

// 查询
const handleQuery = () => {};

// 重置
const resetQuery = () => {};

// 提前离职
const advanceDepart = (row) => {
  console.log(row);
  ElMessageBox.confirm('确定要离职吗，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // const loginout = await loginOut();
      // userStore.token = '';
      // localStorage.token = '';
      // userStore.userInfo = {};

      const res = await agreeDepartAPI({ employeeId: row.employeeId, id: row.id });
      console.log(res);

      if (res.code == '200') {
        getPageList();
        ElMessage({
          type: 'success',
          message: '离职成功',
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消退出',
      });
    });
};

// getPageList()
</script>

<style scoped lang="less">
.staffDepartManage {
  background-color: #ffffff;

  height: 100%;
  display: flex;
  flex-direction: column;

  .activeText {
    //color: ;
  }

  .searchBox {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 32px;
    margin: 16px 0;

    .left {
      display: flex;
      align-items: center;
      margin-right: 16px;
    }

    label {
      font-size: 14px;
      color: #999999;
      margin-right: 3px;
    }
  }
}
</style>
